<script setup>
    import CardTitle from '../../../components/CardTitle.vue'
    import { getOverviewDetails } from '@/api/home'

    import { nextTick, onMounted, onUnmounted  } from 'vue'
    import * as echarts from "echarts"

    const props = defineProps({
        facilityOverview: {
            type: Object,
            default: {}
        }
    })

    let resData = $ref(props.facilityOverview)

    let onlineRef = $ref(null)
    let eCharts = null

    onMounted(() => {
        init()
        getDetils()

    })

    // 设备总数
    let total = $ref(0)

    // 设备离线
    let offline = $ref(0)

    // 在线率
    let onlineRate = $ref(0)

    const init = (type) => {
        total = resData.sum
        offline = resData.online
        onlineRate = resData.onlineRate

        const option = {
            series: [
                {
                    type: 'pie',
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            fontSize:22,
                            color:'#E7FFFF',
                            formatter: onlineRate,
                            textBorderWidth: 5,
                            textBorderColor: '#078792'
                        },
                        emphasis: {//中间文字显示
                            show: true,
                        }
                    },  
                    center: ['50%', '50%'],
                    radius: ['60%', '100%'],
                    startAngle: 225,
                    hoverOffset: 0,  
                    data: [
                        {
                            name: '用量',
                            value: 100,
                            itemStyle: {
                                color: '#00c9e0'
                            }
                        },
                        {
                            name: 'rest',// 剩余用量
                            value: 10,
                            itemStyle: {
                                color: 'rgba(0, 95, 192, 0.5)'
                            }
                        },
                        {
                            name: 'bottom',
                            value: 30,
                            itemStyle: {
                                color: 'transparent'
                            }
                        },
                    ]
                }
            ]

        }

        if(!type) eCharts = echarts.init(onlineRef)
        eCharts.setOption(option)
    }


    const refreshData = (data) => {
        eCharts.clear()
        //刷新数据
        init('refresh')
    }

    let timer = undefined
    const getDetils = () => {
        timer = setTimeout(() => {
            getOverviewDetails().then(res => {
                if(res.success){
                    resData = res.result
                    
                    refreshData()
    
                    nextTick(() => {
                        clearTimeout(timer)
                        getDetils()
                    })
                }
            })
        }, 5 * 1000)
    }

    onUnmounted(() => {
        clearTimeout(timer)
    })


</script>

<template>
    <div class="equipment-overview-wrap">

        <card-title title="设备总览"></card-title>

        <div class="overview-content flex-center">
            <div class="total item">
                <div class="number font-b">{{ total }}</div>
                <div class="desc">设备总数/个</div>
            </div>
            <div class="online item">
                <div class="online-pie" ref="onlineRef"></div>
                <div class="pie-warp">
                    <div class="text">
                        <p>在线率</p>
                        <div class="bototm-line"></div>
                    </div>
                </div>
            </div>
            <div class="total item">
                <div class="number font-b">{{ offline }}</div>
                <div class="desc">设备离线/个</div>
            </div>
        </div>
        
    </div>
</template>

<style lang="less" scoped>
    .equipment-overview-wrap{
        width: 100%;
        height: 235px;
        background: url('../../../assets/images/equipment-overview.png') center no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;

        .overview-content{
            margin-top: -40px;
            .item{
                flex: 1;
                text-align: center;
            }

            .online{
                // width: 100%;
                height: 200px;
                position: relative;
                overflow: hidden;
                margin-top: -30px;

                .online-pie{
                    width: 100%;
                    height: 200px;
                }

                .pie-warp{
                    position: absolute;
                    color: #fff;
                    width: 100%;
                    bottom: 30px;
                    text-align: center;
                    font-size: 16px;

                    .bototm-line{
                        display: inline-block;
                        width: 28px;
                        height: 4px;
                        border: 2px;
                        background: #01FFF6;
                    }
                }
            }

            .total{
                .number{
                    font-size: 36px;
                    color: var(--color-highlight);
                    padding: 20px 0 15px 0;
                }

                .desc{
                    color: #fff;
                }

            }
        }
    }
</style>